<template>
  <ElSelect v-model="selectedValue" filterable clearable :="$attrs" placeholder="">
    <ElOption v-for="item in options" :key="item.dictDetailId" :label="item.name" :value="item.name"/>
  </ElSelect>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue'
import {ElSelect, ElOption} from 'element-plus'
import {getdictIdList} from '../api'

interface Props {
  modelValue: string | null;
  data: any;
}

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | null): void
}>()

const props = defineProps<Props>()
const selectedValue = ref(props.modelValue)

const options = ref<Array<{ name: string, dictDetailId: number }>>([])

// 监听 modelValue 外部变化
watch(() => props.modelValue, (newVal) => {
  selectedValue.value = newVal
})

// 监听 selectedValue 内部变化并同步到父组件
watch(selectedValue, (newVal) => {
  emit('update:modelValue', newVal)
})

const getOptions = () => {

  if (props.data.clfsVal != null && props.data.clfsVal != '') {
    options.value = [{name: '已完结', dictDetailId: 1037}]
  } else {
    getdictIdList({parentId: 1036})
        .then(res => {
          options.value = res
        })
  }
}

watch(() => props.data.clfsVal, () => {
  selectedValue.value = null
  emit('update:modelValue', null)
  getOptions()
}, {deep: true})

getOptions()
</script>